<!--
 * @Author: yangfan 1437446666@qq.com
 * @Date: 2023-02-27 15:32:44
 * @LastEditors: yangfan 1437446666@qq.com
 * @LastEditTime: 2023-03-08 17:04:10
 * @FilePath: \s_2006A_shixun\src\views\KnowledgeBooklet.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- // 知识小册 -->
<template>
  <div><BwButton style="float: right" @click="handUploadkow"></BwButton></div>
  <!-- 知识小册的渲染 -->
  <div class="knowledge">
    <template v-for="(item, index) in state.knowledgeList" :key="index">
      <know-book
        :item="item"
        @DEleteHttp="DEleteHttp"
        @SETknowledge="SETknowledge"
      />
    </template>
  </div>
  <!-- 知识小册的分页器 -->
  <div class="pagination">
    <a-pagination
      v-model:current="state.page"
      :total="20"
      @change="changePage"
    />
  </div>
  <!-- 知识小册的弹出层 -->
  <drawer-com
    title="更新知识库"
    :toUpdate="state.toUpdate"
    v-model:visible="visible"
    @HandDrawer="HandDrawer"
    @handDelete="handDelete"
  >
    <div>
      <div class="detaill-context">
        <a-row :gutter="[24, 24]">
          <a-col :span="4">名称</a-col>
          <a-col :span="18">
            <a-input
              v-model:value="state.knowledgeDetail.summary"
              placeholder="Basic usage"
              :rows="4"
            />
          </a-col>
        </a-row>
        <a-row :gutter="[24, 24]">
          <a-col :span="4">储存路径</a-col>
          <a-col :span="18">
            <a-input
              v-model:value="state.knowledgeDetail.title"
              placeholder="Basic usage"
          /></a-col>
        </a-row>
        <a-row :gutter="[24, 24]">
          <a-col :span="4">封面</a-col>
          <a-col :span="18">
            <!-- 上传模块 -->
            <UploadVis
              :url="state.knowledgeDetail.cover || state.knowledgeDetail.url"
            >
            </UploadVis>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 24]">
          <a-col :span="4"></a-col>
          <a-col :span="18">
            <a-input
              :value="state.knowledgeDetail.cover || state.knowledgeDetail.url"
              placeholder="Basic usage"
            />
            <a-button
              type="primary"
              @click="headSelectFile"
              style="margin-right: 10px"
              >选择文件</a-button
            >

            <a-button type="primary">移除</a-button>
          </a-col>
        </a-row>
      </div>
    </div>
  </drawer-com>
  <!-- 选址文件的弹出层 -->
  <drawer-com
    title="选址文件"
    toUpdate="更新"
    v-model:visible="selectFile"
    width="1000"
    @HandDrawer="headSelectFile"
  >
    <Fileadmin></Fileadmin>
  </drawer-com>
</template>
<script lang="ts">
// 知识小册
import {
  GETKnowledge,
  PATCHKowledge,
  setKnowledge,
  newKnowledge,
  editKnowledge,
  echoKnowledge
} from '@/api/knowledge.js'
import Fileadmin from './FileManagement.vue'
//引入type类型
import { knowledgestateType } from '@/types/index'
import { defineComponent, reactive, ref, onUnmounted, nextTick } from 'vue'
import { Mitt } from '@/utils/mitt'
import { message } from 'ant-design-vue'
export default defineComponent({
  components: {
    Fileadmin
  },
  setup(props, context) {
    //知识小册 弹出层的显示隐藏
    const visible = ref<boolean>(false)
    //选址文件的弹出层
    const selectFile = ref<boolean>(false)
    //点击关闭按钮
    const HandDrawer = () => {
      visible.value = !visible.value
    }
    //接口拿到的数据
    const state: knowledgestateType = reactive({
      knowledgeList: [],
      page: 1,
      pageSize: 10,
      knowledgeDetail: {},
      toUpdate: '更新'
    })
    //获取小册数据
    const get_knowledge = async () => {
      const res = await GETKnowledge({
        page: state.page,
        pageSize: state.pageSize
      })
      state.knowledgeList = res.data.data[0]
      // console.log(res)
    }
    // 页码的监听事件
    const changePage = () => {
      get_knowledge()
    }
    // 删除后 重新渲染数据
    const DEleteHttp = (val) => {
      console.log(val)
      get_knowledge()
    }
    //设置
    const SETknowledge = async (val) => {
      HandDrawer()
      const {
        data: { data }
      } = await echoKnowledge(val)
      state.knowledgeDetail = data
    }
    //选中图片回显
    const headSelectFile = () => {
      selectFile.value = !selectFile.value
    }
    //接受传递来的图片信息
    const Fileadmin = (val) => {
      selectFile.value = !selectFile.value
      const { url } = val
      state.knowledgeDetail.cover = url
    }
    //
    const handDelete = async (): Promise<any> => {
      if (state.toUpdate == '更新') {
        const { id, cover, isCommentable, summary, title } =
          state.knowledgeDetail
        console.log(id, cover, isCommentable, summary, title)
        const result = await PATCHKowledge(id, {
          cover,
          isCommentable,
          summary,
          title
        })
        state.knowledgeDetail = result.data.data
        HandDrawer()
        get_knowledge()
      }
      if (state.toUpdate == '创建') {
        try {
          if (state.knowledgeDetail) {
            const res = await newKnowledge({
              ...state.knowledgeDetail,
              isCommentable: false
            })
            const { data } = res
            if (data.statusCode == 201) {
              HandDrawer()
              message.success('上传成功')
              get_knowledge()
            }
          } else {
            message.error('内容为空')
          }
        } catch (error) {
          console.log(error)
          message.error('error')
        }
      }

      // return result
    }
    Mitt.on('clickEventsPerCard', Fileadmin)
    //更新数据
    onUnmounted(() => {
      Mitt.off('clickEventsPerCard', Fileadmin)
      // handDelete.then((res) => {
      //   console.log(res);

      // })
    })
    //上传
    const handUploadkow = async () => {
      state.toUpdate = '创建'
      HandDrawer()
    }

    //更新小册的内容

    /**
     * @default 事件的调用
     */
    get_knowledge()
    return {
      state,
      changePage,
      DEleteHttp,
      SETknowledge,
      HandDrawer,
      visible,
      selectFile,
      headSelectFile,
      handDelete,
      handUploadkow
    }
  }
})
</script>
<style>
.knowledge {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pagination {
  margin-top: 30px;
}
.detaill-context {
  line-height: 50px;
}
</style>
